<template>
  <view class="coach-skeleton">
    <!-- 轮播图骨架 -->
    <view class="skeleton-swiper">
      <view class="skeleton-item skeleton-image"></view>
    </view>
    
    <!-- 教练信息骨架 -->
    <view class="skeleton-card">
      <view class="skeleton-coach-header">
        <view class="skeleton-coach-info">
          <view class="skeleton-avatar"></view>
          <view class="skeleton-details">
            <view class="skeleton-line skeleton-name"></view>
            <view class="skeleton-line skeleton-experience"></view>
            <view class="skeleton-line skeleton-rating"></view>
          </view>
        </view>
        <view class="skeleton-price">
          <view class="skeleton-line skeleton-price-text"></view>
          <view class="skeleton-line skeleton-price-unit"></view>
        </view>
      </view>
      
      <view class="skeleton-tags">
        <view class="skeleton-tag"></view>
        <view class="skeleton-tag"></view>
        <view class="skeleton-tag"></view>
      </view>
    </view>
    
    <!-- 详情骨架 -->
    <view class="skeleton-card">
      <view class="skeleton-line skeleton-title"></view>
      <view class="skeleton-line skeleton-content"></view>
      <view class="skeleton-line skeleton-content"></view>
      <view class="skeleton-line skeleton-content short"></view>
    </view>
    
    <!-- 评价骨架 -->
    <view class="skeleton-card">
      <view class="skeleton-line skeleton-title"></view>
      <view class="skeleton-comment">
        <view class="skeleton-avatar small"></view>
        <view class="skeleton-comment-content">
          <view class="skeleton-line skeleton-comment-name"></view>
          <view class="skeleton-line skeleton-comment-text"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  // 骨架屏组件，无需逻辑
</script>

<style lang="scss" scoped>
  .coach-skeleton {
    padding-bottom: 120rpx;
  }

  .skeleton-swiper {
    height: 750rpx;
    margin-bottom: 14rpx;
    
    .skeleton-image {
      width: 100%;
      height: 100%;
    }
  }

  .skeleton-card {
    background: #ffffff;
    margin: 14rpx 20rpx;
    border-radius: 16rpx;
    padding: 30rpx;
  }

  .skeleton-coach-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .skeleton-coach-info {
      display: flex;
      align-items: flex-start;
      flex: 1;
      
      .skeleton-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 20rpx;
      }
      
      .skeleton-details {
        flex: 1;
        
        .skeleton-name {
          width: 200rpx;
          height: 36rpx;
          margin-bottom: 12rpx;
        }
        
        .skeleton-experience {
          width: 300rpx;
          height: 26rpx;
          margin-bottom: 12rpx;
        }
        
        .skeleton-rating {
          width: 150rpx;
          height: 24rpx;
        }
      }
    }
    
    .skeleton-price {
      text-align: right;
      
      .skeleton-price-text {
        width: 120rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }
      
      .skeleton-price-unit {
        width: 60rpx;
        height: 24rpx;
      }
    }
  }

  .skeleton-tags {
    display: flex;
    gap: 16rpx;
    
    .skeleton-tag {
      width: 100rpx;
      height: 40rpx;
      border-radius: 20rpx;
    }
  }

  .skeleton-title {
    width: 200rpx;
    height: 32rpx;
    margin-bottom: 20rpx;
  }

  .skeleton-content {
    width: 100%;
    height: 28rpx;
    margin-bottom: 12rpx;
    
    &.short {
      width: 60%;
    }
  }

  .skeleton-comment {
    display: flex;
    align-items: flex-start;
    margin-top: 20rpx;
    
    .skeleton-avatar.small {
      width: 60rpx;
      height: 60rpx;
      border-radius: 30rpx;
      margin-right: 16rpx;
    }
    
    .skeleton-comment-content {
      flex: 1;
      
      .skeleton-comment-name {
        width: 120rpx;
        height: 24rpx;
        margin-bottom: 8rpx;
      }
      
      .skeleton-comment-text {
        width: 80%;
        height: 24rpx;
      }
    }
  }

  .skeleton-item {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
  }

  .skeleton-line {
    @extend .skeleton-item;
    border-radius: 4rpx;
  }

  .skeleton-avatar {
    @extend .skeleton-item;
  }

  .skeleton-tag {
    @extend .skeleton-item;
  }

  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
</style>
